<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>CSS3侧边栏卡片式菜单导航DEMO演示</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
<script>
    document.body.addEventListener('touchstart', function(){ });
</script>
  <div class='card-holder'>
  <div class='card-wrapper'>
    <a href='#'>
      <div class='card bg-01'>
        <span class='card-content'>测试45456465</span>
      </div>
    </a>
  </div>
  <div class='card-wrapper'>
    <a href='#'>
      <div class='card bg-02'>
        <span class='card-content'>测试45456465999999999</span>
      </div>
    </a>
  </div>
  <div class='card-wrapper'>
    <a href='#'>
      <div class='card bg-03'>
        <span class='card-content'>menu item #3</span>
      </div>
    </a>
  </div>
  <div class='card-wrapper'>
    <a href='#'>
      <div class='card bg-04'>
        <span class='card-content'>item #4</span>
      </div>
    </a>
  </div>
  <div class='card-wrapper'>
    <a href='#'>
      <div class='card bg-05'>
        <span class='card-content'>menu item #5</span>
      </div>
    </a>
  </div>
  <div class='card-wrapper'>
    <a href='#'>
      <div class='card bg-06'>
        <span class='card-content'>long menu item #1</span>
      </div>
    </a>
  </div>
</div>
</body>

</html>